<template>
  <div class="book-list-container">
    <!-- <Overlay :show="overlay" /> -->
    <div class="book__data__list">
      <div v-for="(item0, index0) in createData" :key="index0" class="book__data__row">
        <book-item
          class="book__data_item"
          v-for="(item1, index1) in item0"
          :key="index1"
          :data="item1"
        />
      </div>
		 <ul class="book-list" v-for="book in bookList">
			 <li class="imgs"><router-link to="/"><img :src="book.cover"/></router-link></li>
			 <li class="title"><router-link to="/">{{book.title}}</router-link></li>
		 </ul>
	  
    </div>
    <pagination
      :page="getPageInfo.page"
      :pageCount="getPageInfo.pageCount"
      :handleClick="handleClick"
    />
  </div>
</template>

<script>
import BookItem from "./Item";
import Pagination from "../Pagination";
import { mapGetters, mapActions, mapMutations } from "vuex";


export default {

  components: {
    BookItem,
    Pagination,
  },
  name: "BookList",

  props: {
    data: {
      type: Array
    }
  },
  data(){
	  return{
		  bookList:[]
	  }
  },

  computed: {
    createData() {
      const data = this.data;
      let res = [];
      for (let i = 0; i < data.length; i += 5) {
        let arr = [];
        for (let j = i; j < i + 5; j++) {
          if (data[j]) arr.push(data[j]);
        }
        res.push(arr);
      }
      return res;
    },
    ...mapGetters(["getBookList", "getPageInfo"])
  },

created() {
	this.getUserList()
},
  methods: {
	  async getUserList(){
	    const {data: result} = await this.$http.get('/book/findAllBooks')
	    this.bookList = result
	  },
	  
    ...mapMutations(["setOverlay"]),
    ...mapActions(["fetchBookList", "updatePageInfo"]),
    async handleClick(page) {
      const { pageSize, pageCount } = this.getPageInfo;
      this.updatePageInfo({ page, pageSize, pageCount });
      this.setOverlay(true);
      await this.fetchBookList({ page, pageSize });
      this.setOverlay(false);
    }
  }
};
</script>

<style lang="less" scoped>
.book-list-container {
  position: relative;
  background: #fff;
  padding: 20px 20px 30px 20px;
  margin: auto;
  height: 600px;
  .book__data__list {
    .book__data__row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
  }
}
.book-list{
	list-style: none;
	float: left;
}
.title{
	float: left;
	width: 120px;
	text-align: center;
	font-size: 14px;
}

.imgs img {
	width: 66px;
	height: 88px;
	padding-left: 25px;
}



</style>